<template>
	<el-form ref="form" :model="form" :label-width="labelWidth" size="small" @submit.native.prevent :label-position="labelPosition" :rules="rules">
		<el-form-item v-for="item in formList" :key="item.name" :label="item.label" :prop="item.name">
			<template v-if="item.type === 'input'">
			  <el-input :maxlength="item.maxlength" :minlength="item.maxlength || 0" v-model="form[item.name]" @blur="inputBlur(item)"></el-input>
			</template>
			<template v-else-if="item.type === 'select'">
				<el-select v-model="form[item.name]" style="width:100%" :filterable="true" :disabled='item.disabled' :multiple="item.multiple">
					<el-option v-for="(one, index) in item.data" :key="index" :label="one.label" :value="one.value">
					</el-option>
				</el-select>
			</template>
			<template v-else-if="item.type === 'format'">
				<el-checkbox-group v-model="form[item.name]">
					<el-checkbox :label="1">图片
						<el-popover
						placement="top-start"
						width="200"
						trigger="hover"
						content="图片包括以下类型：jpg、jpeg、png、gif、bmp、psd、tif、jfif">
						<i class="el-icon-question" slot="reference"></i>
  					</el-popover></el-checkbox>
					<el-checkbox :label="2">视频<el-popover
						placement="top-start"
						width="200"
						trigger="hover"
						content="视频包括以下类型：mkv、mp4、avi、swf、wmv、rmvb、mov、mpg">
						<i class="el-icon-question" slot="reference"></i>
  					</el-popover></el-checkbox>
					<el-checkbox :label="3">文档<el-popover
						placement="top-start"
						width="200"
						trigger="hover"
						content="文档包括以下类型：txt、pdf、doc、docx、xls、xlsx、cvs、xml、ppt、pptx、wps、htm、html、rtf、hlp">
						<i class="el-icon-question" slot="reference"></i>
  					</el-popover></el-checkbox>
						<el-checkbox :label="4">音频<el-popover
						placement="top-start"
						width="200"
						trigger="hover"
						content="音频包括以下类型：mp3、flac、ape、wma、wav、aac、m4a、au、ram、mmf、aif">
						<i class="el-icon-question" slot="reference"></i>
  					</el-popover></el-checkbox>
				</el-checkbox-group>
			</template>
			<template v-else-if="item.type === 'uploadLimit'">
				<div class="upload-limit">
					<div class="label">上传最大数量：</div>
					<el-input-number v-model="form[item.number]" :controls="false" style="width: 100px" :max="10" :min="0"></el-input-number>
				</div>
				<div class="upload-limit" style="margin-top: 12px">
					<div class="label">单个文件的大小限制：</div>
					<el-input-number v-model="form[item.limit]" :controls="false" style="width: 100px" :max="20" :min="0"></el-input-number>
				</div>
			</template>
			<template v-else-if="item.type === 'defaultAttachList'">
				<accessory v-model="form[item.name]" :item="form" class="accessory-panel"></accessory>
			</template>
		</el-form-item>
	</el-form>
</template>
<script lang="ts">
import { Component, Prop, Vue, Ref, Emit, Watch } from 'vue-property-decorator';
// eslint-disable-next-line no-restricted-imports
import { trim } from 'lodash';
import accessory from './accessory.vue'
@Component({
  name: 'accessoryPropertyPanel',
  components: {
    accessory
  },
  filters: {
  }
})
export default class extends Vue {
  [x: string]: any;
  @Prop(Object) public form!: any;
  @Prop(Object) public rules!: any;
  @Prop(Array) public fieldsList!: any;
  @Prop(Array) public formList!: any[];
  @Prop({ default: '80px' }) public labelWidth!: string;
  @Prop({ default: 'top' }) public labelPosition!: string;

  @Emit('blur')
  private inputBlur (item) {
    this.form[item.name] = trim(this.form[item.name]);
    return item;
  }
}
</script>
<style scoped lang='stylus'>
.upload-limit {
	font-size: 12px
	display: flex
	color: #303753
	align-items: center
	.label {
		width: 130px
	}
}
.accessory-panel {
	>>> .attachments-list {
		overflow-y: hidden;
    max-height: 400px;
    overflow-x: hidden;
	}
}
</style>
